<script setup>
import { ref } from 'vue'
import ChooseImage from '@/components/ChooseImage.vue'
import { readGoodsAPI, setGoodsBanner } from '@/api/goods'
import { toast } from '@/composables/util'
const dialogVisible = ref(false)
const form = ref({
  banners: []
})

const goodsId = ref(0)
const open = (row) => {
  goodsId.value = row.id
  row.bannersLoading = true
  readGoodsAPI(goodsId.value).then(res => {
    form.value.banners = res.goodsBanner.map(o => o.url)
  })
    .finally(() => {
      row.bannersLoading = false
    })
  dialogVisible.value = true
}
const emit = defineEmits(['reloadData'])
const loading = ref(false)
const submit = () => {
  loading.value = true
  setGoodsBanner(goodsId.value, form.value)
    .then(res => {
      toast('设置轮播图成功')
      dialogVisible.value = false
      emit('reloadData')
    })
    .finally(() => {
      loading.value = false
    })
}
defineExpose({
  open
})
</script>
<template>
  <el-drawer title="设置轮播图" v-model="dialogVisible" size="50%" :destroy-on-close="true">
    <el-form :model="form" label-width="80px">
      <el-form-item label="轮播图">
        <ChooseImage :limit="9" v-model="form.banners"></ChooseImage>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit" :loading="loading">提交</el-button>
      </el-form-item>
    </el-form>

  </el-drawer>

</template>
